<template>
    <div class="contion">
        <div class="register">
            <div class="register_1">
                <span><b>注册账户到</b></span>
                <span style="color:#E44F32"><b>鞋履趣集</b></span>
                <span style="color:#9F9E9A;font-size:18px;margin-top:20px">您好，请注册以继续</span>
            </div>
            <div class="register_2">
                <van-cell-group inset>
                    <van-field
                        v-model="register.username"
                        label="用户名"
                        placeholder="请输入用户名"
                        label-align="top"
                        style="border:#E44F32 2px solid;width:400px;height:70px; border-radius:15px;border-radius:15px;margin-bottom:20px"
                    />
                    <van-field
                        v-model="register.account"
                        label="账号"
                        placeholder="请输入账号"
                        label-align="top"
                        style="border:#E44F32 2px solid;width:400px;height:70px; border-radius:15px;border-radius:15px;margin-bottom:20px"
                    />
                    <van-field
                        v-model="register.password"
                        label="密码"
                        placeholder="请输入密码"
                        label-align="top"
                        type="password" id="confirm-password"
                        style="border:#E44F32 2px solid;width:400px;height:70px; border-radius:15px;margin-bottom:20px"
                    />
                </van-cell-group>
                <div class="register_3">
                    <van-radio-group v-model="checked" shape="square">
                        <van-radio name="1" checked-color="red" icon-size="25px"></van-radio>
                    </van-radio-group>
                    <span>&nbsp;&nbsp;我已同意本网站规定的</span>
                    <span><a href="" style="color:red" @click="article">《条款和条件》</a></span>
                    <span>以及</span>
                    <span><a href="" style="color:red" @click="privacy">《隐私政策》</a></span>
                </div>
                <div class="register_4">
                    <el-button @click="dataregister">注册</el-button>
                </div>
                <span style="margin-left:150px">已有账号? </span>
                <span style="color:#E44F32" @click="login"> 登录</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const inputValue = ref('');

const checked=ref('1')

let register = ref({
    username:"",
    account:"",
    password:""
})
const dataregister = () =>{
    axios.post("http://127.0.0.1:8000/home/user/", register.value).then(res=>{
        if(register.account=='' | register.password ==''){
            ElMessage.error('账号或密码不能为空')
        }
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/login')
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}

const login = () =>{
    router.push('/login')
}

const privacy = () =>{
    router.push('/privacy')
}

const article = () =>{
    router.push('/article')
}
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.register{
    margin-top: 200px;
}

.register_1{
    font-size:25px;
    display: flex;
    flex-direction: column;
}


.register_2{
    margin-top: 50px;
}

.register_3{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}

.register_4 button{
    width: 400px;
    height: 70px;
    background-color: #E44F32;
    border-radius: 15px;
    color:#FFFFFF;
    margin-top: 50px;
    margin-bottom: 40px;
    border: #E44F32 1px solid;
    margin-left: 20px;
}
</style>